<template>
  <el-form
    v-show="getShow"
    ref="formSmsLogin"
    :model="loginData.loginForm"
    :rules="rules"
    class="login-form"
    label-position="top"
    label-width="120px"
    size="large"
  >
    <el-row style="margin-right: -10px; margin-left: -10px">
      <!-- 租户名 -->
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item>
          <LoginFormTitle style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
          <el-input
            v-model="loginData.loginForm.tenantName"
            :placeholder="t('login.tenantNamePlaceholder')"
            :prefix-icon="iconHouse"
            type="primary"
            link
          />
        </el-form-item>
      </el-col>
      <!-- 手机号 -->
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="mobileNumber">
          <el-input
            v-model="loginData.loginForm.mobileNumber"
            :placeholder="t('login.mobileNumberPlaceholder')"
            :prefix-icon="iconCellphone"
          />
        </el-form-item>
      </el-col>
      <!-- 验证码 -->
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="code">
          <el-row :gutter="5" justify="space-between" style="width: 100%">
            <el-col :span="24">
              <el-input
                v-model="loginData.loginForm.code"
                :placeholder="t('login.codePlaceholder')"
                :prefix-icon="iconCircleCheck"
              >
                <!-- <el-button class="w-[100%]"> -->
                <template #append>
                  <span
                    v-if="mobileCodeTimer <= 0"
                    class="getMobileCode"
                    style="cursor: pointer"
                    @click="getSmsCode"
                  >
                    {{ t('login.getSmsCode') }}
                  </span>
                  <span v-if="mobileCodeTimer > 0" class="getMobileCode" style="cursor: pointer">
                    {{ mobileCodeTimer }}秒后可重新获取
                  </span>
                </template>
              </el-input>
              <!-- </el-button> -->
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <!-- 登录按钮 / 返回按钮 -->
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item>
          <XButton
            :loading="loginLoading"
            :title="t('login.login')"
            class="w-[100%]"
            type="primary"
            @click="signIn()"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item>
          <XButton
            :loading="loginLoading"
            :title="t('login.backLogin')"
            class="w-[100%]"
            @click="handleBackLogin()"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import type { RouteLocationNormalizedLoaded } from 'vue-router';

import { useIcon } from '@/hooks/web/useIcon';

import { setTenantId, setToken } from '@/utils/auth';
import { usePermissionStore } from '@/store/modules/permission';
import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login';
import LoginFormTitle from './LoginFormTitle.vue';
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin';
import { ElLoading } from 'element-plus';

defineOptions({ name: 'MobileForm' });

const { t } = useI18n();
const message = useMessage();
const permissionStore = usePermissionStore();
const { currentRoute, push } = useRouter();
const formSmsLogin = ref();
const loginLoading = ref(false);
const iconHouse = useIcon({ icon: 'ep:house' });
const iconCellphone = useIcon({ icon: 'ep:cellphone' });
const iconCircleCheck = useIcon({ icon: 'ep:circle-check' });
const { validForm } = useFormValid(formSmsLogin);
const { handleBackLogin, getLoginState } = useLoginState();
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);

const rules = {
  tenantName: [required],
  mobileNumber: [required],
  code: [required]
};
const loginData = reactive({
  codeImg: '',
  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
  token: '',
  loading: {
    signIn: false
  },
  loginForm: {
    uuid: '',
    tenantName: '芋道源码',
    mobileNumber: '',
    code: ''
  }
});
const smsVO = reactive({
  smsCode: {
    mobile: '',
    scene: 21
  },
  loginSms: {
    mobile: '',
    code: ''
  }
});
const mobileCodeTimer = ref(0);
const redirect = ref<string>('');
const getSmsCode = async () => {
  await getTenantId();
  smsVO.smsCode.mobile = loginData.loginForm.mobileNumber;
  await sendSmsCode(smsVO.smsCode).then(async () => {
    message.success(t('login.SmsSendMsg'));
    // 设置倒计时
    mobileCodeTimer.value = 60;
    let msgTimer = setInterval(() => {
      mobileCodeTimer.value = mobileCodeTimer.value - 1;
      if (mobileCodeTimer.value <= 0) {
        clearInterval(msgTimer);
      }
    }, 1000);
  });
};
watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = route?.query?.redirect as string;
  },
  {
    immediate: true
  }
);
// 获取租户 ID
const getTenantId = async () => {
  if (loginData.tenantEnable === 'true') {
    const res = await getTenantIdByName(loginData.loginForm.tenantName);
    setTenantId(res);
  }
};
// 登录
const signIn = async () => {
  await getTenantId();
  const data = await validForm();
  if (!data) return;
  ElLoading.service({
    lock: true,
    text: '正在加载系统中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  loginLoading.value = true;
  smsVO.loginSms.mobile = loginData.loginForm.mobileNumber;
  smsVO.loginSms.code = loginData.loginForm.code;
  await smsLogin(smsVO.loginSms)
    .then(async (res) => {
      setToken(res);
      if (!redirect.value) {
        redirect.value = '/';
      }
      push({ path: redirect.value || permissionStore.addRouters[0].path });
    })
    .catch(() => {})
    .finally(() => {
      loginLoading.value = false;
      setTimeout(() => {
        const loadingInstance = ElLoading.service();
        loadingInstance.close();
      }, 400);
    });
};
</script>

<style lang="scss" scoped>
:deep(.anticon) {
  &:hover {
    color: var(--el-color-primary) !important;
  }
}

.smsbtn {
  margin-top: 33px;
}
</style>
